<template>
  <div class="stats-card">
    <div class="card-header">
      <div class="card-icon" :style="{ background: iconBgColor }">
        <el-icon :class="['icon', iconColor]"><component :is="icon" /></el-icon>
      </div>
      <div class="card-title-section">
        <h3 class="card-title">{{ title }}</h3>
        <div class="card-subtitle" v-if="subtitle">{{ subtitle }}</div>
      </div>
    </div>
    
    <div class="card-value">
      <CountTo :value="value" class="value"></CountTo>
      <div class="trend" v-if="showTrend">
        <span :class="['trend-value', trendColor]">
          <el-icon v-if="trend > 0"><ArrowUp /></el-icon>
          <el-icon v-else-if="trend < 0"><ArrowDown /></el-icon>
          {{ Math.abs(trend) }}%
        </span>
        <span class="trend-period">vs 上月</span>
      </div>
    </div>
    
    <div class="card-footer" v-if="footerText">
      {{ footerText }}
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import CountTo from '@/components/CountTo.vue'
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'

const props = defineProps({
  icon: {
    type: String,
    required: true
  },
  iconColor: {
    type: String,
    default: 'text-blue-500'
  },
  iconBgColor: {
    type: String,
    default: 'rgba(64, 158, 255, 0.1)'
  },
  title: {
    type: String,
    required: true
  },
  subtitle: {
    type: String,
    default: ''
  },
  value: {
    type: Number,
    required: true
  },
  trend: {
    type: Number,
    default: null
  },
  showTrend: {
    type: Boolean,
    default: false
  },
  footerText: {
    type: String,
    default: ''
  }
})

const trendColor = computed(() => {
  if (props.trend > 0) {
    return 'text-green-500'
  } else if (props.trend < 0) {
    return 'text-red-500'
  }
  return 'text-gray-500'
})
</script>

<style scoped>
.stats-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.stats-card:hover {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 16px;
}

.icon {
  font-size: 24px;
}

.card-title-section {
  flex: 1;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2329;
  margin: 0 0 4px 0;
}

.card-subtitle {
  font-size: 12px;
  color: #86909c;
}

.card-value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.value {
  font-size: 28px;
  font-weight: 600;
  color: #1f2329;
}

.trend {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.trend-value {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
}

.trend-period {
  font-size: 12px;
  color: #86909c;
}

.card-footer {
  margin-top: auto;
  font-size: 13px;
  color: #86909c;
  padding-top: 16px;
  border-top: 1px solid #f2f3f5;
}
</style> 